<template>
  <div>
    <div class = "sousuo">
       手机号: <i-input v-model="phone" placeholder="请输入..." style="width: 300px"></i-input>
        <i-button type="primary" shape="circle" icon="ios-search" @click="getListInfo(0)"></i-button>
        <br>
       当前列表><span v-if="this.status>0">已处理</span><span v-else>未处理</span>
        <br>
        <i-button type="info" size="small"  @click="getListInfo(1)">已处理</i-button>
        <i-button type="info" size="small"  @click="getListInfo(0)">未处理</i-button>
    </div>
    <Row class="body">
      <i-col span="3">编号</i-col>
      <i-col span="3">身份证号</i-col>
      <i-col span="2">姓名</i-col>
      <i-col span="3">电话</i-col>
      <i-col span="3">办卡银行</i-col>
      <i-col span="2">办卡奖励金额</i-col>
      <i-col span="2">推荐奖励金额</i-col>
      <i-col span="3">操作时间</i-col>
      <i-col span="3">操作</i-col>
    </Row>

    <Row class="list" v-for="(item,index) of list" :key="index">
      <i-col span="3">{{item.createTime}}</i-col>
      <i-col span="3">{{item.idNumber}}</i-col>
      <i-col span="2">{{item.realName}}</i-col>
      <i-col span="3">{{item.phone}}</i-col>
      <i-col span="3">{{item.bankName}}&nbsp;</i-col>
      <i-col span="2">{{item.bankBonus}}&nbsp;</i-col>
      <i-col span="2">{{item.superiorBonus}}&nbsp;</i-col>
      <i-col span="3">{{item.updateTime}}&nbsp;</i-col>
      <i-col span="3">
        <i-button
          v-if="item.status==0"
          type="info"
          size="small"
          @click="async(item.userId,item.bankBonus,item.superiorBonus,item.realName)"
        >激活</i-button>
        <i-button type="error" size="small"  @click="handleDelManager(item.userId,item.phone)">删除</i-button>
      </i-col>
    </Row>

      <div class="page">
        <Page :total="total" :page-size="pageSize" @on-change="handlePage"></Page>
      </div>

  </div>
</template>

<script>
import axios from "axios";
import { Modal } from "iview";
export default {
  name: "BkUserList",
  data() {
    return {
      pageSize:10,
      page:1,
      total:0,
      list: [],
      modal6: false,
      loading: true,
      phone:'',//21312
      status:0,
    };
  },
  methods: {
    handleDelManager(userId,phone){
      this.$Modal.confirm({
          title: '提示框',
          content: '<p>删除后将无法恢复，您确定要删除吗？</p>',
          loading: true,
          onOk: () => {
              setTimeout(() => {
                    this.$Modal.remove();
                    axios.post('/web/api/createCard/delete',{"id":userId}).then(this.handleDelManagerSucc)
              }, 2000);
          }
      });
      // this.$Message.success("用户是"+userId+phone)


    },
    handleDelManagerSucc(res){
      this.$Message.success(res.data.message)
      this.getListInfo(this.status);
    },
    handlePage (res){
      console.log(res);
      var params = {
        "phone": this.phone, // 电话
        "page": res,
        "pageSize": this.pageSize,
        "status": this.status //0，未处理  1，已处理
      };
      axios.post('/web/api/createCard/list',params).then(this.getListInfoSucc)
    },
    getListInfo(status) {
      this.status = status;
      var params = {
        "phone": this.phone, // 电话
        "page": this.page,
        "pageSize": this.pageSize,
        "status": this.status //0，未处理  1，已处理
      };
      axios.post("/web/api/createCard/list",params).then(this.getListInfoSucc);
    },
    getListInfoSucc(res) {
      console.log("办卡用户列表=====", res);
      this.list = res.data.date.list;
      this.total = res.data.date.total
    },
    handleUpdateManager(userId, bankBonus, superiorBonus) {
      axios
        .post("/web/api/user/initCard", {
          userId: userId,
          bankBonus: bankBonus,
          superiorBonus: superiorBonus
        })
        .then(this.updateInfoSucc);
    },
    updateInfoSucc(res) {
      console.log("修改", res);
      this.$Message.info(res.data.message);
      this.getListInfo(0);
    },
    async(userId, bankBonus, superiorBonus, realName) {
      this.$Modal.confirm({
        title: "提示框",
        content:
          "<p>请确认[" +
          realName +
          "]是否满足给予奖励的条件</p>" +
          "<p>奖励金额￥" +
          bankBonus +
          "元</p><p>[" +
          realName +
          "]的推荐人奖励金额￥" +
          superiorBonus +
          "元</p>",
        loading: true,
        onOk: () => {
          setTimeout(() => {
            this.$Modal.remove();
            this.handleUpdateManager(userId, bankBonus, superiorBonus);
          }, 2000);
        }
      });
    }
  },
  mounted() {
    this.getListInfo(0);
  }
};
</script>
<style lang="stylus" scoped>
.body {
  width: 100%;
  line-height: 3;
  font-size: 14px;
  color: #2680c4;
  background: #eff3fa;
  text-align: center;
}

.list {
  line-height: 3;
  font-size: 14px;
  text-align: center;
  color: #2680c4;
}

.sousuo {
  width: 100%;
  text-align: center;
  margin-top: 2rem;
  margin-bottom: 2rem;
}

.page {
  width: 100%;
  margin-top: 2rem;
  text-align: center;
}
</style>

